<template>
  <div id="app">

    <div class="antd-pro-pages-order-detail-index-container">
      <div class="antd-pro-pages-order-detail-components-navbar-index-navbarContainer">
        <div class="antd-pro-pages-order-detail-components-navbar-index-barItem"><span>我的交易</span><span
          class="antd-pro-pages-order-detail-components-navbar-index-arrow">&gt;</span></div>
        <div class=""><span>订单详情</span></div>
      </div><img src="@/assets/images/ord_img01.png" alt="">

      <div class="ant-col">
        <div class="antd-pro-pages-order-detail-components-order-item-index-container">
          <div class="antd-pro-pages-order-detail-components-order-item-index-left">
            <div class="antd-pro-pages-order-detail-components-order-item-index-orderNum">
              订单号：{{orderInfo.shippingNoteNumber}}
            </div>
            <div class="antd-pro-pages-order-detail-components-order-item-index-orderText">
              <dict-tag
                :options="dict.type.order_status"
                :value="orderInfo.status"
              />
            </div>
            <div class="antd-pro-pages-order-detail-components-order-item-index-orderBtn">
              <button alt="评分" v-if="orderInfo.status == 3" @click="score" type="button" class="ant-btn ant-btn-link"><span>评分</span></button>
              <button alt="再下一单" @click="repeatTo" type="button" class="ant-btn ant-btn-link"><span>再下一单</span></button>
              <button alt="查看回单" v-if="orderInfo.isReceipt == 1" @click="receiptTo" type="button" class="ant-btn ant-btn-link"><span>查看回单</span></button>
            </div>
            <div></div>
          </div>
          <div class="antd-pro-pages-order-detail-components-order-item-index-line"></div>
          <div style="margin: 10px; width: 500px">
            <el-steps :active="parseInt(orderInfo.status)" align-center>
              <el-step title="待发车" :description="parseInt(orderInfo.status) >= 1?orderInfo.sendToProDateTime:''"></el-step>
              <el-step title="运输中" :description="parseInt(orderInfo.status) >= 2?orderInfo.despatchActualDateTime:''"></el-step>
              <el-step title="已完成" :description="parseInt(orderInfo.status) >= 3?orderInfo.goodsReceiptDateTime:''"></el-step>
            </el-steps>
          </div>
        </div>
        <!--<div class="antd-pro-pages-order-detail-components-order-item-index-bottom">-->
          <!--<div style="width: 45%;">操作人：{{orderInfo.createBy}}</div>-->
          <!--<div class="antd-pro-pages-order-detail-components-order-item-index-bottomOrder">-->
            <!--<div class="antd-pro-pages-order-detail-components-order-item-index-title">外部订单号：</div>-->
            <!--<div>-->
              <!--<div id="antd-pro-ellipsis-167627535370945"-->
                   <!--class="antd-pro-components-ellipsis-index-ellipsis antd-pro-components-ellipsis-index-lineClamp"-->
                   <!--style="height: 24px; line-height: 24px;">-->
                <!--<span>-</span>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="antd-pro-pages-order-detail-components-order-item-index-bottomOrder">-->
            <!--<div class="antd-pro-pages-order-detail-components-order-item-index-title">客户单号：</div>-->
            <!--<div>-->
              <!--<div class="antd-pro-components-edit-input-style-content">-->
                <!--<div id="antd-pro-ellipsis-167627535370993"-->
                     <!--class="antd-pro-components-ellipsis-index-ellipsis antd-pro-components-ellipsis-index-lineClamp"-->
                     <!--style="height: 24px; line-height: 24px;">-->
                  <!--<span>-</span>-->
                <!--</div>-->
                <!--<div style="display: flex; align-items: center;"><button styles="[object Object]"-->
                                                                         <!--type="button" class="ant-btn ant-btn-link ant-btn-sm"><span>编辑</span></button>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      </div>

      <div>
        <div class="antd-pro-pages-order-detail-components-load-goods-address-index-container">

          <div class="antd-pro-pages-order-detail-components-load-goods-address-index-left">
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-title"><i
              class="anticon antd-pro-pages-order-detail-components-load-goods-address-index-icon"><svg
              width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"
              class="">
              <use xlink:href="#iconfahuorenxinxi"></use>
            </svg></i><span
              class="antd-pro-pages-order-detail-components-load-goods-address-index-titleText">装卸货信息</span>
            </div>
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-des">
              <div>装货地：{{orderInfo.placeOfLoading}}</div>
              <div class="antd-pro-pages-order-detail-components-load-goods-address-index-address">
                <div class="antd-pro-pages-order-detail-components-load-goods-address-index-title">装货单位：
                </div>
                <div class="antd-pro-components-edit-input-style-content">
                  <div id="antd-pro-ellipsis-167627535371316"
                       class="antd-pro-components-ellipsis-index-ellipsis antd-pro-components-ellipsis-index-lineClamp"
                       style="height: 24px; line-height: 24px;">
                    <span>{{orderInfo.consignor != null ?orderInfo.consignor:"-"}}</span>
                  </div>
                  <div style="display: flex; align-items: center;"  v-if="orderInfo.status == 1">
                    <!--<button styles="[object Object]" type="button" class="ant-btn ant-btn-link ant-btn-sm"><span>编辑</span></button>-->
                    <el-popover
                      placement="right"
                      width="400"
                      v-model="consignorVisible"
                    >
                      <el-form>
                        <!--<el-form-item label="装货地">-->
                          <!--<el-input size="mini"/>-->
                        <!--</el-form-item>-->
                        <el-form-item label="装货单位" :model="orderInfo">
                          <el-input size="mini" style="width: 200px" v-model="orderInfo.consignor"/>
                          <el-button size="mini" type="primary" style="margin-left: 5px" @click="updateOrder(1)">确 定</el-button>
                        </el-form-item>
                      </el-form>
                      <el-button style="padding: 0 10px" size="mini" type="text" slot="reference">编辑</el-button>
                    </el-popover>
                  </div>
                </div>
              </div>
              <div>卸货地：{{orderInfo.goodsReceiptPlace}}</div>
              <div class="antd-pro-pages-order-detail-components-load-goods-address-index-address">
                <div class="antd-pro-pages-order-detail-components-load-goods-address-index-title">卸货单位：
                </div>
                <div class="antd-pro-components-edit-input-style-content">
                  <div id="antd-pro-ellipsis-167627535371316"
                       class="antd-pro-components-ellipsis-index-ellipsis antd-pro-components-ellipsis-index-lineClamp"
                       style="height: 24px; line-height: 24px;">
                    <span>{{orderInfo.consignee!=null ?orderInfo.consignee : "-"}}</span>
                  </div>
                  <div style="display: flex; align-items: center;" v-if="orderInfo.status == 1">
                    <!--<button styles="[object Object]" type="button" class="ant-btn ant-btn-link ant-btn-sm"><span>编辑</span></button>-->
                    <el-popover
                      placement="right"
                      width="400"
                      v-model="consigneeVisible"
                    >
                      <el-form >
                        <!--<el-form-item label="卸货地">-->
                          <!--<el-input size="mini"/>-->
                        <!--</el-form-item>-->
                        <el-form-item :model="orderInfo" label="卸货单位">
                          <el-input size="mini" style="width: 200px" v-model="orderInfo.consignee"/>
                          <el-button size="mini" type="primary" style="margin-left: 5px" @click="updateOrder(2)">确 定</el-button>
                        </el-form-item>

                      </el-form>

                      <el-button style="padding: 0 10px" size="mini" type="text" slot="reference">编辑</el-button>
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="antd-pro-pages-order-detail-components-load-goods-address-index-left">
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-title"><i
              class="anticon antd-pro-pages-order-detail-components-load-goods-address-index-icon"><svg
              width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"
              class="">
              <use xlink:href="#iconhuowuxinxi"></use>
            </svg></i><span
              class="antd-pro-pages-order-detail-components-load-goods-address-index-titleText">货物信息</span>
            </div>
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-des">
              <div>单价及数量：{{orderInfo.totalMonetaryAmount}}元/车</div>
              <div>出厂单价及数量：{{orderInfo.totalMonetaryAmount}}元/车</div>
              <div class="antd-pro-pages-order-detail-components-load-goods-address-index-address">
                <div class="antd-pro-pages-order-detail-components-load-goods-address-index-title">货物:
                </div>
                <div class="antd-pro-components-edit-input-style-content">
                  <div id="antd-pro-ellipsis-167627535371523"
                       class="antd-pro-components-ellipsis-index-ellipsis antd-pro-components-ellipsis-index-lineClamp">
                    <span>{{orderInfo.orderGoods != null && orderInfo.orderGoods.length > 0 ? orderInfo.orderGoods[0].descriptionOfGoods : '-'}}</span>
                  </div>
                  <div style="display: flex; align-items: center;">
                    <button @click="openGoods" styles="[object Object]" type="button" class="ant-btn ant-btn-link ant-btn-sm"><span>更多详细</span></button>
                  </div>
                </div>
              </div>
              <div><span>用车要求：{{orderInfo.carNeed != null?orderInfo.carNeed:'-'}}</span></div>
              <div>备注：{{orderInfo.remark != null?orderInfo.remark:'-'}}</div>
            </div>
          </div>
          <div class="antd-pro-pages-order-detail-components-load-goods-address-index-left"
               style="flex: 2 1 0%;">
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-title"><i
              class="anticon antd-pro-pages-order-detail-components-load-goods-address-index-icon"><svg
              width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"
              class="">
              <use xlink:href="#iconcheliangxinxi"></use>
            </svg></i><span
              class="antd-pro-pages-order-detail-components-load-goods-address-index-titleText">承运信息</span>
            </div>
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-des">
              <div>司机姓名：{{orderInfo.driverName}}</div>
              <div>司机手机号：{{orderInfo.driverPhone}}</div>
              <div>车牌号：{{orderInfo.vehicleNumber != null ?orderInfo.vehicleNumber:'-'}}</div>
              <div>保险单号: {{orderInfo.policyNumber != null ?orderInfo.policyNumber:'-'}}</div>
            </div>
          </div>
        </div>
        <div class="antd-pro-pages-order-detail-components-load-goods-address-index-container">
          <div class="antd-pro-pages-order-detail-components-load-goods-address-index-left"
               style="flex: 1 1 0%;">
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-title"><i
              class="anticon antd-pro-pages-order-detail-components-load-goods-address-index-icon"><svg
              width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"
              class="">
              <use xlink:href="#iconhuowuxinxi"></use>
            </svg></i><span
              class="antd-pro-pages-order-detail-components-load-goods-address-index-titleText">附件信息</span>
            </div>
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-des" style="padding-left: 0px;">
              <button type="button" class="ant-btn ant-btn-link" v-if="orderInfo.status == 3"><span>查看到货附件</span></button>
            </div>
          </div>
          <div class="antd-pro-pages-order-detail-components-load-goods-address-index-left"
               style="flex: 1 1 0%;">
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-title"><i
              class="anticon antd-pro-pages-order-detail-components-load-goods-address-index-icon"><svg
              width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"
              class="">
              <use xlink:href="#iconyiguanbi"></use>
            </svg></i><span
              class="antd-pro-pages-order-detail-components-load-goods-address-index-titleText">解除订单申请</span>
            </div>
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-des" style="padding-left: 0px;">
              <button type="button" class="ant-btn ant-btn-link"><span>查看解除订单申请</span></button>
            </div>
          </div>
          <div class="antd-pro-pages-order-detail-components-load-goods-address-index-left"
               style="flex: 1 1 0%;">
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-title"><i
              class="anticon antd-pro-pages-order-detail-components-load-goods-address-index-icon"><svg
              width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"
              class="">
              <use xlink:href="#iconcaozuojilu"></use>
            </svg></i><span
              class="antd-pro-pages-order-detail-components-load-goods-address-index-titleText">操作记录</span>
            </div>
            <div class="antd-pro-pages-order-detail-components-load-goods-address-index-des"
                 style="padding-left: 0px;"><button type="button" @click="openRecord"
                                                    class="ant-btn ant-btn-link"><span>查看操作记录</span></button></div>
          </div>
        </div>
      </div>


      <div class="antd-pro-pages-order-detail-components-fee-detail-index-container">
        <div class="antd-pro-pages-order-detail-components-fee-detail-index-top">
          <div class="antd-pro-pages-order-detail-components-fee-detail-index-title"><i class="anticon"><svg
            width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"
            class="">
            <use xlink:href="#iconfeiyongxinxi"></use>
          </svg></i><span
            class="antd-pro-pages-order-detail-components-fee-detail-index-titleText">运费确认单</span></div>
          <div class="antd-pro-pages-order-detail-components-fee-detail-index-feePerson">
            <span>承运公司：{{orderInfo.actualCarrierName}}</span>
          </div>
        </div>
        <div class="antd-pro-pages-order-detail-components-fee-detail-index-bottom">
          <div>运输费：{{orderInfo.totalMonetaryAmount}}元</div>
          <div>浮动费用：0.00元</div>
          <div>附加费：0.00元</div>
        </div>
      </div>
      <div class="antd-pro-pages-order-detail-index-totalFee">
        <div class="antd-pro-pages-order-detail-index-totalFeeText">总运费：<span
          class="antd-pro-pages-order-detail-index-amount">{{orderInfo.totalMonetaryAmount}}元</span></div>
        <div class="antd-pro-pages-order-detail-index-hasPayText">{{parseInt(orderInfo.isPay)==0?'未支付':'已支付'}}</div>
      </div>
      <div class="antd-pro-pages-order-detail-components-after-pay-plan-index-container" style="padding: 0px;">
        <div class="antd-pro-pages-order-detail-components-after-pay-plan-index-box"></div>
        <div class="antd-pro-pages-order-detail-components-after-pay-plan-index-top">
          <div class="antd-pro-pages-order-detail-components-after-pay-plan-index-title"></div>
        </div>
        <!--<div class="antd-pro-pages-order-detail-components-after-pay-plan-index-box" id="payplanmd">-->
          <!--<div class="antd-pro-pages-order-detail-components-after-pay-plan-index-bottom">-->
            <!--<div class="antd-pro-pages-order-detail-components-after-pay-plan-index-feePerson">-->
              <!--<span>平台支付计划</span>-->
            <!--</div>-->
            <!--<div>-->
              <!--<div class="antd-pro-pages-order-detail-components-after-pay-plan-index-transportBox">-->
                <!--<div>-->
                  <!--<div class="antd-pro-pages-order-detail-components-after-pay-plan-index-transportFee"-->
                       <!--style="width: 365px; font-size: 14px; font-weight: 500; color: rgb(58, 64, 69);">-->
                    <!--<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span-->
                      <!--class="ant-badge-status-dot ant-badge-status-default"></span><span-->
                      <!--class="ant-badge-status-text"></span></span><span-->
                      <!--class="antd-pro-pages-order-detail-components-after-pay-plan-index-money">司机到付款<b>(现金)</b></span>-->
                    <!--</div>-->
                    <!--<div><span-->
                      <!--class="antd-pro-pages-order-detail-components-after-pay-plan-index-money">¥5000.00</span>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</div>-->
                <!--<div>-->
                  <!--<div>已取消</div>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="antd-pro-pages-order-detail-components-after-pay-plan-index-bottom">-->
            <!--<div class="antd-pro-pages-order-detail-components-after-pay-plan-index-feePerson">-->
              <!--<span>货主支付计划</span>-->
            <!--</div>-->
            <!--<div style="line-height: 20px;">-->
              <!--<div class="antd-pro-pages-order-detail-components-after-pay-plan-index-transportBox">-->
                <!--<div style="width: 250px;">-->
                  <!--<div class="antd-pro-pages-order-detail-components-after-pay-plan-index-transportFee"-->
                       <!--style="font-size: 14px; font-weight: 500; color: rgb(58, 64, 69);">-->
                    <!--<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span-->
                      <!--class="ant-badge-status-dot ant-badge-status-default"></span><span-->
                      <!--class="ant-badge-status-text"></span></span><span-->
                      <!--class="antd-pro-pages-order-detail-components-after-pay-plan-index-money">到付款</span>-->
                    <!--</div>-->
                    <!--<div><span-->
                      <!--class="antd-pro-pages-order-detail-components-after-pay-plan-index-money">¥5279.83</span>-->
                    <!--</div>-->
                  <!--</div>-->
                  <!--<div-->
                    <!--class="antd-pro-pages-order-detail-components-after-pay-plan-index-transportFee">-->
                    <!--<span style="padding-left: 13px;">到付款附加费</span><span-->
                    <!--class="antd-pro-pages-order-detail-components-after-pay-plan-index-money">¥279.83</span>-->
                  <!--</div>-->
                <!--</div>-->
                <!--<div>-->
                  <!--<div>已取消</div>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      </div>
      <div class="antd-pro-pages-order-detail-components-logistics-detail-index-container">
        <div class="antd-pro-pages-order-detail-components-logistics-detail-index-title">
          物流跟踪<div class="ant-radio-group ant-radio-group-outline" style="float: right;">
          <label :class="locus == 1 ?'ant-radio-button-wrapper ant-radio-button-wrapper-checked':'ant-radio-button-wrapper'" @click="locus = 1">
            <span class="ant-radio-button ant-radio-button-checked">
              <input type="radio" class="ant-radio-button-input" value="1" checked="">
              <span class="ant-radio-button-inner"></span>
            </span>
            <span>中交轨迹</span>
          </label>
          <label :class="locus == 2 ?'ant-radio-button-wrapper ant-radio-button-wrapper-checked':'ant-radio-button-wrapper'" @click="locus = 2">
            <span class="ant-radio-button">
              <input type="radio" class="ant-radio-button-input" value="2">
              <span class="ant-radio-button-inner"></span>
            </span>
            <span>手机轨迹</span>
          </label>
        </div>
        </div>
        <div class="antd-pro-pages-order-detail-components-logistics-detail-index-content"
             style="display: flex;" v-if="locus==1 && gisList.length == 0 || locus == 2 && trailList == 0">
          <div>暂无物流跟踪记录哦</div>
        </div>
        <div class="antd-pro-pages-order-detail-components-logistics-detail-index-contentMap" v-if="gisList.length>0 && locus == 1">
          <!--<div class="ant-table-wrapper" style="height: 560px;width: 40%">-->
            <!--<el-table :data="gisList" stripe fit :header-cell-style="{'text-align':'center'}" height="560">-->
              <!--<el-table-column label="时间" prop="createTime"/>-->
              <!--<el-table-column label="地点" prop="address"/>-->
            <!--</el-table>-->
          <!--</div>-->
          <div style="flex: 1 1 0%;">
            <div style="flex: 1 1 0%;">
              <div id="mobileMap"
                   style="height: 560px; overflow: hidden; position: relative; z-index: 0; background-color: rgb(243, 241, 236); color: rgb(0, 0, 0); text-align: left;">
                <map-tracker ref="trackerRef"/>
              </div>
            </div>
          </div>
        </div>
        <div  class="antd-pro-pages-order-detail-components-logistics-detail-index-contentMap" v-if="trailList.length>0 && locus == 2">
          <div class="ant-table-wrapper" style="height: 560px;width: 40%">
            <el-table :data="trailList" stripe fit :header-cell-style="{'text-align':'center'}" height="560">
              <el-table-column label="时间" prop="createTime"/>
              <el-table-column label="地点" prop="address"/>
            </el-table>
          </div>
          <div style="flex: 1 1 0%;">
            <div id="mobileMap"
                 style="height: 560px; overflow: hidden; position: relative; z-index: 0; background-color: rgb(243, 241, 236); color: rgb(0, 0, 0); text-align: left;">
              <MapTracker ref="trailRef"/>
            </div>
          </div>
        </div>
      </div>


    </div>

    <el-dialog title="货物详情" :visible.sync="goodsOpen">
      <el-table :data="orderInfo.orderGoods" border size="mini" stripe fit border :header-cell-style="{'text-align':'center'}">
        <el-table-column label="货物名称" prop="descriptionOfGoods"/>
        <el-table-column label="货物类型" prop="cargoTypeClassificationCode" :formatter="cargoTypeFormat"/>
        <el-table-column label="货物毛重(千克)" prop="goodsItemGrossWeight"/>
      </el-table>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="recordOpen" width="1000px">
      <use-record ref="recordRef"/>
    </el-dialog>
    <el-dialog :visible.sync="receiptOpen" :title="title">
      <div>
          <el-image v-for="(img, index) in backImg" :key="index" :src="img" :previewSrcList="backImg"  class="re-img"/>
      </div>

    </el-dialog>
    <el-dialog title="评价" :visible.sync="scoreOpen" width="500px">
      <el-row :gutter="24">
        <el-col :span="12">
          <h3>
            货源方评价
          </h3>
          <el-rate
            v-model="orderInfo.starCompany"
            :show-score="orderInfo.starCompany != null && orderInfo.starCompany != 0"
            disabled
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </el-col>
        <el-col :span="12">
          <h3>
            司机评价
          </h3>
          <el-rate
            v-model="orderInfo.starDriver"
            :show-score="orderInfo.starDriver != null && orderInfo.starDriver != 0"
            disabled
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </el-col>
        <div slot="footer" class="dialog-footer">
          <el-button @click="scoreCancel">取 消</el-button>
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getOrder, updateOrder } from "@/api/tws/order";
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
import { getByOrder, listGis } from '@/api/tws/gis';
import { allTrail } from '@/api/tws/orderTrail';
import UseRecord from '@/components/UseRecord/index';
import MapTracker from '@/components/Map/MapTracker';

export default {
  name: 'OrderDetail',
  dicts:['order_status'],
  components: {
    UseRecord,
    MapTracker
  },
  data() {
    return {
      // 禁用确定按钮
      disabled: false,
      // 是否显示保险信息
      is_bx: true,
      // 可修改
      readOnly1: false,
      readOnly2: false,
      orderInfo: {
        id: null,
        originalDocumentNumber: null,
        shippingNoteNumber: null,
        serialNumber: null,
        vehicleAmount: null,
        transportTypeCode: null,
        businessTypeCode: null,
        totalMonetaryAmount: null,
        policyNumber: null,
        insuranceCompanyCode: null,
        leaveTime: null,
        carNeed: null,
        remark: null,
        consignor: null,
        consignorId: null,
        loadLinkTel: null,
        placeOfLoading: null,
        countrySubdivisionCode: null,
        startLongitude: null,
        startLatitude: null,
        consignee: null,
        consigneeId: null,
        receiptLinkTel: null,
        goodsReceiptPlace: null,
        countrySubdivisionCodeS: null,
        endLongitude: null,
        endLatitude: null,
        companyId: null,
        actualCarrierName: null,
        actualCarrierBusinessLicense: null,
        actualCarrierId: null,
        driverId: null,
        driverName: null,
        driverPhone: null,
        vehicleId: null,
        vehicleNumber: null,
        vehiclePlateColorCode: null,
        trailerVehicleId: null,
        trailerVehiclePlateNumber: null,
        trailerVehiclePlateColorCode: null,
        despatchActualDateTime: null,
        goodsReceiptDateTime: null,
        isReceipt: null,
        backImages: null,
        starCompany: null,
        starDriver: null,
        status: null,
        isPay: null,
        isBill: null,
        isSendToPro: null,
        sendToProDateTime: null,
        tenantId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        orderGoods: [],
        drivers: [],
        recordContent:null,
      },
      // 省市区
      options: regionData,
      // 业务类型字典数据
      businessTypeOptions: [],
      // 运输组织类型字典数据
      transportTypeOptions: [],
      // 货物类型字典数据
      cargoTypeClassificationOptions: [],
      // 保险公司字典数据
      insuranceCompanyOptions: [],
      // 订单状态字典数据
      statusOptions: [],
      //查看回单
      receiptOpen:false,
      //回单照片
      backImg:[],
      // 回单照片
      fileList: [],
      gisQuery:{
        pageNum: 1,
        pageSize:null,
        orderId:null
      },
      consignorVisible:false,
      consigneeVisible:false,
      // 弹出层标题
      title: "",
      orderId:null,
      //轨迹按钮
      locus: 1,
      gisList: [],
      trailList: [],

      //货物详细弹窗
      goodsOpen:false,
      //操作记录弹窗
      recordOpen:false,
      scoreOpen:false,

      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  watch: {
    locus:function(newD,oldD){
      this.locusGis()
    },
    // mode: function(newD, oldD) {
    //   if(newD) {
    //     // this.$nextTick(() => {})
    //     this.reset();
    //     // 新增
    //     if(newD == '1') {
    //       // 生成订单号
    //       getOrderNo().then(res => {
    //         this.form.originalDocumentNumber = res.data.originalDocumentNumber;
    //         this.form.shippingNoteNumber = res.data.shippingNoteNumber;
    //       })
    //       // 网络货运经营者信息
    //       if(this.agent) {
    //         this.form.carrier = this.agent.entName;
    //         this.form.unifiedSocialCreditIdentifier = this.agent.unifiedSocialCreditIdentifier;
    //         this.form.permitNumber = this.agent.permitNumber || this.agent.areaCode + '000000';
    //       }
    //       // 应收
    //       for(let i = 0; i < this.opFlowTypeIn.length; i++){
    //         this.flowListIn.push({
    //           flowType: this.opFlowTypeIn[i].id,
    //           amount: null,
    //           companyId: null,
    //           driverId: null
    //         });
    //       }
    //       // 应付
    //       for(let i = 0; i < this.opFlowTypeOut.length; i++){
    //         this.flowListOut.push({
    //           flowType : this.opFlowTypeOut[i].id,
    //           amount: null,
    //           companyId: null,
    //           driverId: null
    //         });
    //       }
    //     } else if(newD == '2') {
    //       // 修改
    //       this.getOrderInfo(this.orderId);
    //     } else if(newD == '3') {
    //       this.getOrderInfo(this.orderId);
    //       // 查看模式只读, 不可修改
    //       this.readOnly1 = true;
    //       this.readOnly2 = true;
    //     }
    //   }
    // },
    deep: true // 可以深度检测到 obj 对象的属性值的变化
  },
  created() {
    this.orderId = this.$route.query && this.$route.query.orderId;
    this.reset();
    this.getDict();
    if(this.orderId) {
      this.getO(this.orderId);
      this.getOrderGis(this.orderId).then(res=>{
        this.locusGis();
      });
      this.getOrderTrail(this.orderId)
    }
  },
  methods: {
    getDict() {
      // 业务类型字典
      this.getDicts("business_type").then(response => {
        this.businessTypeOptions = response.data;
      });
      // 运输组织类型字典
      this.getDicts("transport_type").then(response => {
        this.transportTypeOptions = response.data;
      });
      // 货物类型字典
      this.getDicts("cargo_type_classification").then(response => {
        this.cargoTypeClassificationOptions = response.data;
      });
      // // 保险公司字典
      // this.getDicts("insurance_company").then(response => {
      //   this.insuranceCompanyOptions = response.data;
      // });
      // 订单状态字典
      this.getDicts("order_status").then(response => {
        this.statusOptions = response.data;
      });
    },
    // 获取订单详情
    getO(orderId) {
      getOrder(orderId).then(response => {
        this.orderInfo = response.data;
        console.log("weqewqeqweqw",this.orderInfo)
        if (this.orderInfo.backImages != null){
          this.backImg = this.orderInfo.backImages.split(',')
        }
      }).catch(err => {
        this.$modal.msgError(err.msg || "查询失败");
      })
    },
    // locusChange(num){
    //   this.locus = num;
    //   this.locusGis();
    // },
    //修改订单
    updateOrder(num){
      if (num == 1){
        this.orderInfo.recordContent ="修改装货单位";
        updateOrder(this.orderInfo).then(res =>{
          if (res.code == 200){
            this.reset();
            this.getO(this.orderId);
            this.$modal.msgSuccess("修改成功")
            this.consignorVisible = false;
          }
        })
      } else if (num == 2){
        this.orderInfo.recordContent ="修改卸货单位";
        updateOrder(this.orderInfo).then(res =>{
          if (res.code ==200){
            this.reset();
            this.getO(this.orderId);
            this.$modal.msgSuccess("修改成功")
            this.consigneeVisible = false
          }
        })
      }
    },
    locusGis(){
      if (this.locus == 1){
        this.$nextTick(() =>{
          this.$refs.trackerRef.getTrack(this.orderId)
        })
      }else if (this.locus == 2){
        this.$nextTick(() =>{
          this.$refs.trailRef.getPhoneLine(this.orderId);
        })
      }
    },

    getOrderGis(orderId){
      return new Promise((resolve, reject) => {
        this.gisQuery.orderId = orderId;
        listGis(this.gisQuery).then(res =>{
          this.gisList = res.rows;
          resolve();
        })
      } )
    },
    getOrderTrail(orderId){
      this.trailList = []
      allTrail(orderId).then(res =>{
        if (res.code == 200){
          this.trailList = res.data;
        }
      })
    },
    //评分
    score(){
      this.scoreOpen = true;
    },
    scoreCancel(){
      this.scoreOpen = false;
    },
    //再下一单
    repeatTo(){
      this.$router.push("/orderAdd/puTong")
    },
    //查看回单
    receiptTo(){
      this.title="查看回单"
      this.receiptOpen = true;
    },
    openGoods(){
      this.goodsOpen = true;
    },
    openRecord(){
      const id = this.orderId;
      this.recordOpen = true;
      this.title = "操作日志"
      this.$nextTick(() =>{
        this.$refs.recordRef.getList(id);
      })
    },
    // 订单状态字典翻译
    cargoTypeFormat(row, column) {
      return this.selectDictLabel(this.cargoTypeClassificationOptions, row.cargoTypeClassificationCode);
    },
    // 取消按钮
    cancel() {
      this.huidiao();
    },
    huidiao() {
      this.reset();
      this.$emit("close");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        originalDocumentNumber: null,
        shippingNoteNumber: null,
        serialNumber: null,
        vehicleAmount: null,
        transportTypeCode: null,
        businessTypeCode: null,
        totalMonetaryAmount: null,
        policyNumber: null,
        insuranceCompanyCode: null,
        leaveTime: null,
        carNeed: null,
        remark: null,
        consignor: null,
        consignorId: null,
        loadLinkTel: null,
        placeOfLoading: null,
        countrySubdivisionCode: null,
        startLongitude: null,
        startLatitude: null,
        consignee: null,
        consigneeId: null,
        receiptLinkTel: null,
        goodsReceiptPlace: null,
        countrySubdivisionCodeS: null,
        endLongitude: null,
        endLatitude: null,
        companyId: null,
        actualCarrierName: null,
        actualCarrierBusinessLicense: null,
        actualCarrierId: null,
        driverId: null,
        driverName: null,
        driverPhone: null,
        vehicleId: null,
        vehicleNumber: null,
        vehiclePlateColorCode: null,
        trailerVehicleId: null,
        trailerVehiclePlateNumber: null,
        trailerVehiclePlateColorCode: null,
        despatchActualDateTime: null,
        goodsReceiptDateTime: null,
        isReceipt: null,
        backImages: null,
        starCompany: null,
        starDriver: null,
        status: null,
        isPay: null,
        isBill: null,
        isSendToPro: null,
        sendToProDateTime: null,
        tenantId: null,
        companyName: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        orderGoods: [],
        drivers: []
      };
      this.resetForm("form");
      this.is_bx = true;
      this.form.policyNumber = '';
      this.form.insuranceCompanyCode = '';
      this.opCompany = [];
      this.opDriver = [];
      this.sumFlowIn = 0.00;
      this.sumFlowOut = 0.00;
      this.flowTotal = 0.00;
      this.flowListIn = [];
      this.flowListOut = [];
      this.readOnly1 = false;
      this.readOnly2 = false;
      this.fileList = [];
    },
    blurF() {
      if(this.form.countrySubdivisionLabel) {
        this.getFLocation();
      }
    },
    blurS() {
      if(this.form.countrySubdivisionLabelS) {
        this.getSLocation();
      }
    },
    // 获取发货地址的经纬度
    getFLocation() {
      let address = this.form.countrySubdivisionLabel + this.form.placeOfLoading;
      this.geocoder.getLocation(address, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.form.startLongitude = result.geocodes[0].location.lng;
          this.form.startLatitude = result.geocodes[0].location.lat;
        }
      });
    },
    // 获取收货地址的经纬度
    getSLocation() {
      let address = this.form.countrySubdivisionLabelS + this.form.goodsReceiptPlace;
      this.geocoder.getLocation(address, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.form.endLongitude = result.geocodes[0].location.lng;
          this.form.endLatitude = result.geocodes[0].location.lat;
        }
      });
    },
    // 隐藏保险信息
    ycBx() {
      this.is_bx = false;
      this.form.policyNumber = 'none';
      this.form.insuranceCompanyCode = 'none';
    },
    // 添加保险信息
    tjBx() {
      this.is_bx = true;
      this.form.policyNumber = '';
      this.form.insuranceCompanyCode = '';
    },
    /** 添加行数据 */
    addLine(i) {
      // 应收
      if(i == 1){
        this.flowListIn.push({
          flowType: null,
          amount: 0,
          companyId: this.form.companyId || null,
          driverId: null
        });
      //应付
      } else {
        this.flowListOut.push({
          flowType: null,
          amount: 0,
          companyId: null,
          driverId: this.form.driverId || null
        });
      }
    },
    /** 底部统计 */
    sumFlow: function() {
      this.$nextTick(() => {//时机似乎有点问题 -- 处理下
        this.sumFlowIn = 0.00;
        this.sumFlowOut = 0.00;
        //应收
        for (let i = 0; i < this.flowListIn.length; i++) {
          if(!isNaN(this.flowListIn[i].amount)){
            this.sumFlowIn += Number(this.flowListIn[i].amount);
          }
        }
        //应付
        for (let i = 0; i < this.flowListOut.length; i++) {
          if(!isNaN(this.flowListOut[i].amount)){
            this.sumFlowOut += Number(this.flowListOut[i].amount);
          }
        }
        this.sumFlowIn = this.sumFlowIn.toFixed(2);
        this.sumFlowOut =  this.sumFlowOut.toFixed(2);

        //利润
        this.flowTotal = (this.sumFlowIn - this.sumFlowOut).toFixed(2);
      })
    },
  }
};
</script>

<style>
  /* #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    } */

  .re-img{
    width: 100px;
    height: 100px;
    margin-right: 15px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .re-img:hover{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .antd-pro-pages-order-detail-index-container {
    width: 1200px;
    margin: 0 auto 3000px;
    padding-bottom: 74px;
    overflow-x: hidden;
    line-height: 0
  }

  .antd-pro-pages-order-detail-components-navbar-index-navbarContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: #3a4045;
    font-size: 14px;
    height: 51px;
  }

  .antd-pro-pages-order-detail-components-navbar-index-navbarContainer .antd-pro-pages-order-detail-components-navbar-index-barItem {
    cursor: pointer;
    color: #969a9d;
  }

  .antd-pro-pages-order-detail-components-navbar-index-navbarContainer .antd-pro-pages-order-detail-components-navbar-index-arrow {
    margin: 0 3px;
  }

  .ant-col {
    position: relative;
    min-height: 1px;
  }

  .antd-pro-pages-order-detail-components-order-item-index-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 200px;
    border: 1px solid #e7e8e9;
  }

  .antd-pro-pages-order-detail-components-order-item-index-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 300px;
    height: 100%;
  }

  .antd-pro-pages-order-detail-components-order-item-index-left .antd-pro-pages-order-detail-components-order-item-index-orderNum {
    margin-top: 36px;
    margin-bottom: 26px;
    color: #969a9d;
    font-size: 14px;
    line-height: 16px;
  }

  .antd-pro-pages-order-detail-components-order-item-index-left .antd-pro-pages-order-detail-components-order-item-index-orderText {
    margin-bottom: 20px;
    color: #3a4045;
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
  }

  .antd-pro-pages-order-detail-components-order-item-index-left .antd-pro-pages-order-detail-components-order-item-index-orderBtn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .antd-pro-pages-order-detail-components-order-item-index-left .antd-pro-pages-order-detail-components-order-item-index-orderBtn button {
    margin: 0 5px;
  }

  .antd-pro-pages-order-detail-index-container .ant-btn {
    padding: 0 11px;
  }

  .ant-btn>i,
  .ant-btn>span {
    display: inline-block;
    transition: margin-left .3s cubic-bezier(.645, .045, .355, 1);
    pointer-events: none;
  }

  .ant-btn {
    line-height: 1.499;
    position: relative;
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
    cursor: pointer;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    border-radius: 4px;
    color: rgba(0, 0, 0, .65);
    background-color: #fff;
    border: 1px solid #d9d9d9;
  }

  .ant-btn-link {
    color: #1890ff;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .antd-pro-pages-order-detail-components-order-item-index-container .antd-pro-pages-order-detail-components-order-item-index-line {
    width: 1px;
    height: 119px;
    background-color: #e7e8e9;
  }

  .antd-pro-pages-order-detail-components-order-item-index-container .antd-pro-pages-order-detail-components-order-item-index-right {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    padding-top: 40px;
  }

  .antd-pro-pages-order-detail-components-order-item-index-container .antd-pro-pages-order-detail-components-order-item-index-right .antd-pro-pages-order-detail-components-order-item-index-processContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
  }

  .antd-pro-pages-order-detail-components-order-item-index-container .antd-pro-pages-order-detail-components-order-item-index-right .antd-pro-pages-order-detail-components-order-item-index-processContainer .antd-pro-pages-order-detail-components-order-item-index-processContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .antd-pro-pages-order-detail-components-order-item-index-container .antd-pro-pages-order-detail-components-order-item-index-right .antd-pro-pages-order-detail-components-order-item-index-processContainer .antd-pro-pages-order-detail-components-order-item-index-iconLine {
    position: absolute;
    top: -18px;
    right: -37px;
    color: #0093ff;
    font-size: 75px;
  }

  .anticon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .antd-pro-pages-order-detail-components-order-item-index-container .antd-pro-pages-order-detail-components-order-item-index-right .antd-pro-pages-order-detail-components-order-item-index-processContainer .antd-pro-pages-order-detail-components-order-item-index-processContent .antd-pro-pages-order-detail-components-order-item-index-icon {
    color: #0093ff;
    font-size: 36px;
  }

  .antd-pro-pages-order-detail-components-order-item-index-container .antd-pro-pages-order-detail-components-order-item-index-right .antd-pro-pages-order-detail-components-order-item-index-processContainer .antd-pro-pages-order-detail-components-order-item-index-processContent .antd-pro-pages-order-detail-components-order-item-index-processText {
    margin: 8px 0;
    color: #5d6266;
    font-size: 14px;
    line-height: 20px;
  }

  .antd-pro-pages-order-detail-components-order-item-index-container .antd-pro-pages-order-detail-components-order-item-index-right .antd-pro-pages-order-detail-components-order-item-index-processContainer .antd-pro-pages-order-detail-components-order-item-index-processContent .antd-pro-pages-order-detail-components-order-item-index-time {
    color: #5d6266;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
  }

  .antd-pro-pages-order-detail-components-order-item-index-container .antd-pro-pages-order-detail-components-order-item-index-right .antd-pro-pages-order-detail-components-order-item-index-processContainer .antd-pro-pages-order-detail-components-order-item-index-seeCancelReason {
    position: absolute;
    bottom: -18px;
    color: #f2554d;
    font-size: 12px;
  }

  .antd-pro-pages-order-detail-index-container {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 74px;
    overflow-x: hidden;
    line-height: 0;
  }

  .antd-pro-pages-order-detail-components-order-item-index-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding-left: 20px;
    color: #5d6266;
    font-size: 14px;
    border-right: 1px solid #e7e8e9;
    border-bottom: 1px solid #e7e8e9;
    border-left: 1px solid #e7e8e9;
  }

  .antd-pro-pages-order-detail-components-order-item-index-bottom .antd-pro-pages-order-detail-components-order-item-index-bottomOrder {
    width: 33%;
    height: 24px;
    padding-left: 20px;
    border-left: 1px solid #e7e8e9;
    display: flex;
    align-items: center;
  }

  .antd-pro-components-edit-input-style-content {
    display: flex;
  }

  .antd-pro-pages-order-detail-components-load-goods-address-index-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 19px;
    padding: 20px 0;
    border: 1px solid #e7e8e9;
  }

  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-left {
    border-left: 1px solid #e7e8e9;
  }

  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-center,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-left,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-right {
    flex: 3 1;
    padding: 0 20px;
  }

  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-center .antd-pro-pages-order-detail-components-load-goods-address-index-title,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-left .antd-pro-pages-order-detail-components-load-goods-address-index-title,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-right .antd-pro-pages-order-detail-components-load-goods-address-index-title {
    color: #3a4045;
    font-size: 14px;
    line-height: 16px;
  }

  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-center .antd-pro-pages-order-detail-components-load-goods-address-index-des,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-left .antd-pro-pages-order-detail-components-load-goods-address-index-des,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-right .antd-pro-pages-order-detail-components-load-goods-address-index-des {
    margin-top: 17px;
    padding-left: 25px;
    color: #3a4045;
    font-size: 12px;
    line-height: 24px;
  }

  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-center .antd-pro-pages-order-detail-components-load-goods-address-index-title .antd-pro-pages-order-detail-components-load-goods-address-index-titleText,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-left .antd-pro-pages-order-detail-components-load-goods-address-index-title .antd-pro-pages-order-detail-components-load-goods-address-index-titleText,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-right .antd-pro-pages-order-detail-components-load-goods-address-index-title .antd-pro-pages-order-detail-components-load-goods-address-index-titleText {
    margin-left: 10px;
    font-weight: 700;
  }

  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-center .antd-pro-pages-order-detail-components-load-goods-address-index-des .antd-pro-pages-order-detail-components-load-goods-address-index-address,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-left .antd-pro-pages-order-detail-components-load-goods-address-index-des .antd-pro-pages-order-detail-components-load-goods-address-index-address,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-right .antd-pro-pages-order-detail-components-load-goods-address-index-des .antd-pro-pages-order-detail-components-load-goods-address-index-address {
    display: flex;
  }

  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-center .antd-pro-pages-order-detail-components-load-goods-address-index-des .antd-pro-pages-order-detail-components-load-goods-address-index-address .antd-pro-pages-order-detail-components-load-goods-address-index-title,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-left .antd-pro-pages-order-detail-components-load-goods-address-index-des .antd-pro-pages-order-detail-components-load-goods-address-index-address .antd-pro-pages-order-detail-components-load-goods-address-index-title,
  .antd-pro-pages-order-detail-components-load-goods-address-index-container .antd-pro-pages-order-detail-components-load-goods-address-index-right .antd-pro-pages-order-detail-components-load-goods-address-index-des .antd-pro-pages-order-detail-components-load-goods-address-index-address .antd-pro-pages-order-detail-components-load-goods-address-index-title {
    white-space: nowrap;
    line-height: 24px;
    font-size: 12px;
  }

  .ant-btn-sm {
    height: 24px;
    padding: 0 7px;
    font-size: 14px;
    border-radius: 4px;
  }

  .antd-pro-pages-order-detail-components-fee-detail-index-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #e7e8e9;
    margin-top: 19px;
  }

  .antd-pro-pages-order-detail-components-fee-detail-index-container .antd-pro-pages-order-detail-components-fee-detail-index-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .antd-pro-pages-order-detail-components-fee-detail-index-container .antd-pro-pages-order-detail-components-fee-detail-index-top .antd-pro-pages-order-detail-components-fee-detail-index-title {
    font-size: 14px;
    color: #3a4045;
    line-height: 16px;
  }

  .antd-pro-pages-order-detail-components-fee-detail-index-container .antd-pro-pages-order-detail-components-fee-detail-index-top .antd-pro-pages-order-detail-components-fee-detail-index-feePerson {
    color: #969a9d;
    font-size: 12px;
  }

  .antd-pro-pages-order-detail-components-fee-detail-index-container .antd-pro-pages-order-detail-components-fee-detail-index-bottom {
    color: #3a4045;
    font-size: 12px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .antd-pro-pages-order-detail-components-fee-detail-index-container .antd-pro-pages-order-detail-components-fee-detail-index-bottom>div {
    line-height: 20px;
  }

  .antd-pro-pages-order-detail-index-container .antd-pro-pages-order-detail-index-totalFee {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: -1px;
    padding: 27px 20px;
    border: 1px solid #e7e8e9;
  }

  .antd-pro-pages-order-detail-index-container .antd-pro-pages-order-detail-index-totalFee .antd-pro-pages-order-detail-index-totalFeeText {
    color: #5d6266;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px;
  }

  .antd-pro-pages-order-detail-index-container .antd-pro-pages-order-detail-index-totalFee .antd-pro-pages-order-detail-index-hasPayText {
    margin-top: 10px;
    color: #969a9d;
    font-size: 14px;
    line-height: 18px;
  }

  .antd-pro-pages-order-detail-index-container .antd-pro-pages-order-detail-index-totalFee .antd-pro-pages-order-detail-index-totalFeeText .antd-pro-pages-order-detail-index-amount {
    color: #ff8259;
    font-weight: 700;
    font-size: 24px;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-container {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #e7e8e9;
    border-top: none;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-container .antd-pro-pages-order-detail-components-after-pay-plan-index-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow: hidden;
    line-height: 1.5;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-container .antd-pro-pages-order-detail-components-after-pay-plan-index-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-container .antd-pro-pages-order-detail-components-after-pay-plan-index-top .antd-pro-pages-order-detail-components-after-pay-plan-index-title {
    color: #3a4045;
    font-size: 14px;
    line-height: 16px;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-container .antd-pro-pages-order-detail-components-after-pay-plan-index-bottom:first-child {
    margin-right: -1px;
    border-right: 1px solid #e7e8e9;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-container .antd-pro-pages-order-detail-components-after-pay-plan-index-bottom {
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding: 42px 35px 20px 20px;
    color: #3a4045;
    font-size: 12px;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-container .antd-pro-pages-order-detail-components-after-pay-plan-index-bottom:nth-child(2) {
    border-left: 1px solid #e7e8e9;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-container .antd-pro-pages-order-detail-components-after-pay-plan-index-feePerson {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 20px;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background: #68758e;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-transportBox {
    display: flex;
    justify-content: space-between;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-transportFee {
    display: flex;
    justify-content: space-between;
    width: 260px;
    padding-left: 10px;
    color: #3a4045;
  }

  .ant-badge-status {
    line-height: inherit;
    vertical-align: baseline;
  }

  .ant-badge {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    color: unset;
    line-height: 1;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-money {
    color: #3a4045;
  }

  .ant-badge-status-default {
    background-color: #d9d9d9;
  }

  .ant-badge-status-dot {
    position: relative;
    top: -1px;
    display: inline-block;
    width: 6px;
    height: 6px;
    vertical-align: middle;
    border-radius: 50%;
  }

  .ant-badge-status-text {
    margin-left: 8px;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-transportFee b {
    padding-left: 10px;
    color: #5d6266;
    font-weight: 400;
    font-size: 12px;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-money {
    color: #3a4045;
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-container:before {
    position: absolute;
    top: -9px;
    right: 24px;
    display: block;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #e7e8e9;
    border-left: 9px solid transparent;
    content: "";
  }

  .antd-pro-pages-order-detail-components-after-pay-plan-index-container:after {
    position: absolute;
    top: -6.6px;
    right: 24px;
    display: block;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    content: "";
  }

  .antd-pro-pages-order-detail-components-logistics-detail-index-container {
    display: flex;
    flex-direction: column;
    margin-top: 19px;
    border: 1px solid #e7e8e9;
  }

  .antd-pro-pages-order-detail-components-logistics-detail-index-container .antd-pro-pages-order-detail-components-logistics-detail-index-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 20px;
    color: #5d6266;
    font-size: 14px;
    line-height: 40px;
    background-color: rgba(43, 100, 216, .03);
    border-bottom: 1px solid #e7e8e9;
  }

  .antd-pro-pages-order-detail-components-logistics-detail-index-container .antd-pro-pages-order-detail-components-logistics-detail-index-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: #969a9d;
    font-size: 14px;
  }

  .antd-pro-pages-order-detail-components-logistics-detail-index-container .antd-pro-pages-order-detail-components-logistics-detail-index-contentMap {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ant-radio-group {
    line-height: 40px;
  }

  .ant-radio-group {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    display: inline-block;
  }

  .ant-radio-button-wrapper:first-child {
    border-left: 1px solid #d9d9d9;
    border-radius: 4px 0 0 4px;
  }

  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    z-index: 1;
    color: #1890ff;
    background: #fff;
    border-color: #1890ff;
    box-shadow: -1px 0 0 0 #1890ff;
  }

  .ant-radio-button-wrapper:last-child {
    border-radius: 0 4px 4px 0;
  }

  .ant-radio-button-wrapper {
    position: relative;
    display: inline-block;
    height: 32px;
    margin: 0;
    padding: 0 15px;
    color: rgba(0, 0, 0, .65);
    line-height: 30px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: 1.02px solid #d9d9d9;
    border-left: 0;
    cursor: pointer;
    transition: color .3s, background .3s, border-color .3s;
  }

  .ant-radio-button-wrapper>.ant-radio-button {
    display: block;
    width: 0;
    height: 0;
    margin-left: 0;
  }

  .ant-radio-button-wrapper {
    position: relative;
    display: inline-block;
    height: 32px;
    margin: 0;
    padding: 0 15px;
    color: rgba(0, 0, 0, .65);
    line-height: 30px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: 1.02px solid #d9d9d9;
    border-left: 0;
    cursor: pointer;
    transition: color .3s, background .3s, border-color .3s;
  }

  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
    color: #096dd9;
    border-color: #096dd9;
    box-shadow: -1px 0 0 0 #096dd9;
  }

  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
    color: #40a9ff;
    border-color: #40a9ff;
    box-shadow: -1px 0 0 0 #40a9ff;
  }

  .ant-radio-button-wrapper .ant-radio-inner,
  .ant-radio-button-wrapper input[type=checkbox],
  .ant-radio-button-wrapper input[type=radio] {
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  input[type=checkbox],
  input[type=radio] {
    box-sizing: border-box;
    padding: 0;
  }

  [role=button],
  a,
  area,
  button,
  input:not([type=range]),
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
  }
</style>
